<template>
	<!-- 20221028 -->
	<view class="swiper-group-cn width-100p">

		<!-- 组件内容 -->
		<view class="cn-content width-100p">
			<view class="width-100p">
				<swiper class="width-100p" :style="{'height': swiperHeight + 'rpx'}" :indicator-dots="indicatorDots"
					:indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor">
					<!-- 每一页 -->
					<swiper-item class="width-100p overflow-hidden" v-for="(item,index) in listGroup" :key="index">
						<view class="flex flex-wrap">
							<!-- 每一个图标 -->
							<view class="flex flex-direction align-center padding-tb-15"
								v-for="(item1,index1) in item" :key="index1" @tap="itemClick(index,index1)"
								:style="{width: 'calc(100% / ' + lineNumber + ')'}">
								<!-- 图标 -->
								<image class="jc-image radius-50p" :src="item1.cover_img" mode="aspectFill"
									:style="{'width':imageSize + 'rpx','height':imageSize + 'rpx'}">
								</image>
								<!-- 文本 -->
								<text class="margin-top-15 line-height-30 text-33"
									:style="{'font-size': textSize + 'rpx'}">
									{{item1.name}}
								</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">
		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		data() {
			return {
				indicatorActiveColor: common.mainColor(),
				indicatorColor: 'rgba(230, 230, 230, 0.6)'
			}
		},
		props: {
			// 数据显示
			list: {
				type: Array,
				default: []
			},
			// 列数
			lineNumber: {
				type: [Number, String],
				default: 5
			},
			// 行数
			columnNumber: {
				type: [Number, String],
				default: 2
			},
			// 图片宽高，默认单位为rpx
			imageSize: {
				type: [Number, String],
				default: 80
			},
			// 文字大小，默认单位为rpx
			textSize: {
				type: [Number, String],
				default: 24
			}
		},

		computed: {
			// 轮播组
			listGroup() {
				return common.arrayGroup(this.list, this.lineNumber * this.columnNumber)
			},

			// 轮播图高度
			swiperHeight() {
				// 每一行高度 30(padding-tb) + 80(imageHeight) + 15(margin-top) + 30(textHeight) = 155 155 * 2 + 30 = 340
				let height = 340
				let listGroup = common.arrayGroup(this.list, this.lineNumber * this.columnNumber)
				// 计算高度
				if (listGroup.length <= 1) {
					let column = Math.ceil(listGroup[0].length / this.lineNumber)
					height = (this.imageSize + 15 + 30 + 30) * column
				} else {
					height = 30 + (this.imageSize + 15 + 30 + 30) * this.columnNumber
				}

				return height
			},

			// 是否显示轮播点
			indicatorDots() {
				let listGroup = common.arrayGroup(this.list, this.lineNumber * this.columnNumber)
				return listGroup.length > 1 ? true : false
			}
		},

		methods: {
			/**
			 * 点击事件
			 * @param {int} index 第X页
			 * @param {int} index1 第X个
			 * @date 2022-10-28
			 */
			itemClick(index, index1) {
				this.$emit('click', {
					index: index * this.lineNumber * this.columnNumber + index1
				})
			}
		}
	}
</script>

<style scoped>

</style>